<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化之todolist完善</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center">TodoList</h2>
        <div id="app">
            <todo-list></todo-list>
        </div>
    </div>

    <!-- todoList -->
    <template id="todoList">
        <div class="todolist">
            <todo-form v-on:add="addItem"></todo-form>
            <todo-content v-bind:datalist='datalist'></todo-content>
            <div class="row">
                <div class="col font-weight-bolder">Total TodoList：{{datalist.length}}</div>
                <!-- <div class="col font-weight-bolder text-right">已完成事项：{{datalist.filter(item=>item.done).length}}、未完成事项：{{datalist.filter(item=>!item.done).length}}</div> -->
                <div class="col font-weight-bolder text-right">DoneList：{{Done.length}}、UnDoneList：{{UnDone.length}}</div>
            </div>
        </div>
    </template>

    <!-- todoForm -->
    <template id='todoForm'>
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Please Enter the event you are going to do" v-model='todoEvent' ref='inputValue' @keyup.13='add'>
            <div class="input-group-append">
                <!-- <button class="btn btn-outline-secondary" type="button" id="button-addon2" v-on:click="add">Submit</button> -->
                <todo-button class="btn-outline-secondary" id="button-addon2" v-on:click.native="add">Submit</todo-button>
            </div>
        </div>
    </template>

    <!-- todoContent -->
    <template id='todoContent'>
        <table class="table table-hover table-dark">
            <thead>
                <tr>
                    <th scope="col" width='10%'>ID</th>
                    <th scope="col">Event</th>
                    <th scope="col" width='20%'>IsDone</th>
                    <th scope="col" width='20%'>Handle</th>
                </tr>
            </thead>
            <tbody>
                <!-- <todo-item></todo-item> -->
                <tr is='todoItem' v-for='item,idx in datalist' :item='item' :idx='idx'></tr>
            </tbody>
        </table>
    </template>

    <!-- todoItem -->
    <template id='todoItem'>
        <tr>
            <th scope="row">{{idx+1}}</th>
            <td>{{item.title}}</td>
            <td>
                <!-- 完成与否按钮 -->
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" v-model='item.done' :id='btnID(item.id)'>
                    <label class="custom-control-label" :for='btnID(item.id)'>{{item.done?"Done":"Undone"}}</label>
                </div>
            </td>
            <td>
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                    <!-- <button type="button" class="btn btn-danger" v-on:click='remove(item.id)'>delete</button> -->
                    <todo-button class="btn-danger" v-on:click.native='remove(item.id)'>delete</todo-button>
                </div>
            </td>
        </tr>
    </template>

    <!-- todoButton -->
    <template id="todoButton">
        <button type="button" class="btn">
            <slot></slot>
        </button>
    </template>
    

    <script src="./js/vue.js"></script>
    <script>
        // 5.定义事件总线Bus
        var Bus = new Vue();

        // 6. 全局组件todoButton
        Vue.component('todoButton',{
            template:'#todoButton'
        })

        // 4 todoItem
        const todoItem = {
            template:'#todoItem',
            props: ['item','idx'],
            methods: {
                // input和label的绑定
                btnID(idx){
                    return 'customSwitch'+idx;
                },
                // 5.2 发送方触发事件
                remove(idx){
                    Bus.$emit('remove',idx)
                }
            }
        }

        // 3.1 todoForm
        const todoForm = {
            template:'#todoForm',
            data(){
                return {
                    todoEvent:''
                }
            },
            methods: {
                add(){
                    this.$emit('add',this.todoEvent)
                    this.todoEvent = '';
                    this.$refs.inputValue.focus();
                }
            }
        }

        // 3.2 todoContent
        const todoContent = {
            template:'#todoContent',
            // 局部组件todoItem
            components:{
                todoItem
            },
            props: ['datalist']
        }

        // 2.todoList组件
        const todoList = {
            template:'#todoList',
            // 局部组件：todoForm、todoContent
            components: {
                todoForm,
                todoContent
            },
            // 2.1 编写数据
            data(){
                return{
                    datalist:[
                        {
                            id: 1,
                            title: '实现个小目标，月薪过万',
                            done: true, // 是否完成
                            addtime: Date.now()
                        },
                        {
                            id: 2,
                            title: '实现第二个小目标，赚他一个亿',
                            done: false,
                            addtime: Date.now() + 100
                        },
                        {
                            id: 3,
                            title: '迎娶白富美，达到疯癫状态',
                            done: false,
                            addtime: Date.now() + 100
                        }
                    ]
                }
            },
            methods: {
                addItem(title){
                    // 非空处理
                    if(!title.trim()){
                        alert('Please enter a non-empty to-do event!');
                        return
                    }
                    const data = {
                        id: this.datalist.length+1,
                        title,
                        done: false, // 是否完成
                        addtime: Date.now()
                    }
                    this.datalist.unshift(data)
                },
                removeItem(idx){
                    var tips = confirm('Are you sure want to delete this information?')
                    if(tips){
                        this.datalist = this.datalist.filter(item=>item.id!==idx);
                    }
                }
            },
            computed:{
                // 完成与未完成数量
                Done(){
                    return this.datalist.filter(item=>item.done)
                },
                UnDone(){
                    return this.datalist.filter(item=>!item.done)
                } 
            },
            // 5.1 给接收方todoList绑定事件
            mounted(){
                Bus.$on('remove',(idx)=>{
                    this.removeItem(idx)
                })
            }
        }

        // 1. 实例化vue
        var vm = new Vue({
            el:'.container',
            // 局部组件todoList
            components: {
                todoList
            }
        })
    </script>
</body>
</html>